<template>
	<view id="app">

		<!-- nav 导航栏 -->
		<view class="df dfsa aic f32 bw ptb20 plr30 lh60 c666">
			<!-- 商品分类 -->
			<picker @change="bindPickerChange" :value="index" :range="array" class="f1" range-key="name">
				<view class="rows plr20">
					<view class="f1">{{index > 0 ? array[index].name : '商品分类'}}</view>
					<image class="navlistxl mb10 mt10" src="/static/xx.png" mode="aspectFit" />
				</view>
			</picker>

			<!-- 配送方式 -->
			<picker @change="bindPickerChange2" :value="index2" :range="array2" class="f1">
				<view class="rows plr20">
					<view class="f1">{{index2 > 0 ? array2[index2] : '配送方式'}}</view>
					<image class="navlistxl mb10 mt10" src="/static/xx.png" mode="aspectFit" />
				</view>
			</picker>

			<!-- 发布时间排序 -->
			<view class="f1" @click="li1 = li1 == 1 ? 2 : 1;getGoods()">
				<view class="rows plr20">
					<view class="f1">发布时间</view>
					<!-- 提示图标 -->
					<image class="navlistxl" src="/static/xx.png" :class="{'tr180': li1 == 2}" mode="aspectFit" />
				</view>
			</view>
		</view>

		<!-- 商品 -->
		<view class="df dfsb fww w90p mauto oh c333 f28">
			<!-- for -->
			<view class="bw mt30 br10 w48p lh40" @click="details(item)" v-for="(item,index) in wrap.list" :key="index">
				<image :src="item.images[0]" class="w100p h350 br10" mode="aspectFill"></image>
				<view class="layoutw90 f28 pb20">
					<view class="goods_name proName t2hd mtb10 fwb">{{item.name}}</view>
					<view class="df dfsb aic">
						<text class="f26 c999">{{item.categoryData.name}}</text>
						<text class="cFF7B24 f32 fwb">￥{{item.price}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="ptb50"></view>
	</view>
</template>
<script>
	// 定义全局变量
	var that;
	// 默认
	export default {
		// 定义页面变量
		data() {
			return {
				// 分类
				array: [{
					name: '全部',
				}],
				index: 0,
				array2: ['全部'],
				index2: 0,
				// 1倒序 2正序
				li1: 1,
				// 内容
				wrap: {
					// 是否加载
					ifLoad: false,
					// 页码
					page: 1,
					// 列表
					list: [],
				},
			}
		},

		// 获取后
		onLoad() {
			// 赋值
			that = this;

			// 获取商品
			that.getGoods();

			// 获取分类
			that.getCate();

			// 遍历系统配置的配送方式 赋值追加
			for (let i in uni.getStorageSync('config').express_json) {
				that.array2.push(uni.getStorageSync('config').express_json[i]);
			}
		},

		// 下拉加载
		onPullDownRefresh() {
			// 重新加载
			that.re_load();
		},

		// 页面触底
		onReachBottom() {
			// 判断是否可以加载
			if (that.wrap.ifLoad) {
				that.wrap.page++;

				// 获取商品
				that.getGoods();
			}
		},

		// 方法列表
		methods: {
			// 获取商品
			getGoods() {
				// 开启加载
				uni.showLoading();

				// 内容
				var wrap = that.wrap;
				// 提交变量
				var data = {
					table: 'goods',
					page: wrap.page,
					count: 10,
					order: that.li1 == 1 ? 'createtime desc' : 'createtime asc',
					status: 1,
				};

				// 判断下标是否选择
				that.index > 0 ? data.category_id = that.array[that.index].id : '';

				// 快递
				that.index2 > 0 ? data.express = that.array2[that.index2] : '';

				// 请求接口 
				that.request({
					url: '',
					// 上传数据
					data: data,
					// 调用成功
					success(rs) {
						// 返回成功
						if (rs.code == 1) {
							// 判断是否第一页
							if (wrap.page == 1) {
								// 清空商品
								wrap.list = [];
							}

							// 追加商品
							wrap.list.push(...rs.data);
							// 判断数据是否足够
							wrap.ifLoad = rs.data[9] ? true : false;

							// 重新赋值刷新页面
							that.wrap = Object.assign({}, wrap);

							// 停止页面下拉刷新
							uni.stopPullDownRefresh();
						} else {
							//弹窗提示用户
							that.alert(rs.msg);
						}
					},
					// 关闭加载
					complete() {
						uni.hideLoading();
					},
				})
			},

			// 获取分类
			getCate() {
				// 请求接口 
				that.request({
					url: '',
					// 上传数据
					data: {
						table: 'category',
						pid: 0,
					},
					// 调用成功
					success(rs) {
						// 返回成功
						if (rs.code == 1) {
							// 赋值商品分类
							that.array.push(...rs.data);
						} else {
							//弹窗提示用户
							that.alert(rs.msg);
						}
					}
				})
			},

			// 商品分类
			bindPickerChange(e) {
				that.index = e.target.value

				// 重新加载
				that.re_load();
			},

			// 配送方式
			bindPickerChange2(e) {
				that.index2 = e.target.value

				// 重新加载
				that.re_load();
			},

			// 商品详情
			details(item) {
				uni.navigateTo({
					url: '/pages/task/details?id=' + item.id,
				})
			},

			// 悬浮发布
			release() {
				uni.navigateTo({
					url: '/pages/task/release',
				})
			},

			// 重新加载
			re_load() {
				// 重置页码
				that.wrap.page = 1;

				// 获取商品
				that.getGoods();
			},
		},
	}
</script>
<style>
	/* 下拉 */
	.navlistxl {
		width: 18rpx;
		height: 18rpx;
		transition: transform .3s;
	}

	/* 商品名称 */
	.goods_name {
		height: 80rpx;
	}
</style>
